/* ========================================= */
/* HERO SECTION */
/* ========================================= */

.alphae-hero {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
}

/* REMOVE CONTAO DEFAULT SPACING */
.alphae-hero figure,
.alphae-hero picture {
  margin: 0;
  width: 100%;
  height: 100%;
}

/* IMAGE */
.alphae-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  /* fills banner */
  object-fit: cover;

  /* IMPORTANT:
     keeps TOP visible
     crops from bottom instead */
  object-position: top center;

  z-index: 1;
}

/* OVERLAY */
.alphae-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  z-index: 2;
}

/* CONTENT */
.alphae-content {
  position: relative;
  z-index: 3;

  text-align: center;
  padding: 20px;
}

/* TITLE */
.alphae-content h1 {
  margin: 0;

  color: #fff;

  font-size: 58px;
  font-weight: 800;
  line-height: 1.15;

  text-shadow: 0 3px 12px rgba(0,0,0,0.35);
  margin-top: 130px;
}

/* RED LINE */
.alphae-line {
  display: block;

  width: 42px;
  height: 4px;

  background: #ff0000;

  margin: 16px auto 0;

  border-radius: 50px;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 1200px) {

  .alphae-hero {
    height: 470px;
  }

  .alphae-content h1 {
    font-size: 48px;
  }

}

@media (max-width: 992px) {

  .alphae-hero {
    height: 400px;
  }

  .alphae-content h1 {
    font-size: 38px;
  }

}

@media (max-width: 768px) {

  .alphae-hero {
    height: 340px;
  }

  .alphae-content h1 {
    font-size: 30px;
    line-height: 1.3;
    margin-top: 60;
  }

}

@media (max-width: 480px) {

  .alphae-hero {
    height: 280px;
  }

  .alphae-content h1 {
    font-size: 24px;
    margin-top: 50;
  }

}